<%@ page language="java" contentType="text/html; charset=UTF-8"
         pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<!DOCTYPE html>
<html>
<head>
    <base href="${pageContext.request.contextPath}/" />
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <title>Insert title here</title>
    <style>
        /*定义类名为.thead-blue的样式*/
        .thead-blue {
            color: #fff;
            font-weight: bold;
            background-color: #337ab7;
        }
    </style>
    <link rel="stylesheet" type="text/css" href="view/bootstrap-3.3.5/css/bootstrap.css"/>
    <link rel="stylesheet" type="text/css" href="view/bootstrapvalidator/css/bootstrapValidator.css"/>
    <script charset="utf-8" src="view/jquery/jquery-1.10.2.min.js"></script>
    <script charset="utf-8" src="view/bootstrap-3.3.5/js/bootstrap.js"></script>
    <script charset="utf-8" src="view/bootstrapvalidator/js/bootstrapValidator.js"></script>
</head>
<body>
    <div class="col-md-12" align="right">
        <a type="button" href="view/fiancial/editbxinfop.jsp" class="btn btn-info">添加报销类型</a>
    </div>
<!-- 列表 -->
<div class="panel panel-primary">
    <table class="table table-bordered table-hover">
        <thead>
        <tr class="thead-blue" align="center">
            <td>报销类别编号</td>
            <td>报销类别名称</td>
            <td>报销类别状态</td>
            <td>操作</td>
        </tr>
        </thead>
        <tbody>
        <c:forEach items="${pageBean.data}" var="d">
            <tr align="center">
                <td>${d.oid}</td>
                <td>${d.name }</td>
                <td>${d.isActice=="1"?"可用":"不可用" }</td>
                <td>
                    <a type="button" href="expense/toUpdatebxInfo?oid=${d.oid}" class="btn btn-warning btn-xs">修改</a>
                    <a type="button" href="expense/deleteBxInfo?oid=${d.oid}" class="btn btn-warning btn-xs">删除</a>
                    <c:if test='${d.isActice=="1"}'>
                        <button onclick="updateBxInforState(this,${d.oid})" value="0" class="btn btn-warning btn-xs"
                                type="button">禁用
                        </button>
                    </c:if>
                    <c:if test='${d.isActice=="0"}'>
                        <button onclick="updateBxInforState(this,${d.oid})" value="1" class="btn btn-success btn-xs"
                                type="button">启用
                        </button>
                    </c:if>
                </td>
            </tr>
        </c:forEach>
        </tbody>
    </table>
</div>

<!-- 分页 -->
<div class="input-group col-md-6 col-md-offset-3">
    <div class="row">
        <div class="btn-group">
            <button onclick="gotoPage(1,${pageBean.pageSize})" class="btn btn-primary" type="button">首页</button>
            <c:if test="${pageBean.page==1 }">
                <button class="btn btn-primary disabled" type="button">上一页</button>
            </c:if>
            <c:if test="${pageBean.page>1 }">
                <button onclick="gotoPage(${pageBean.page-1},${pageBean.pageSize})" class="btn btn-primary" type="button">上一页</button>
            </c:if>
            <button class="btn btn-primary disabled" type="button">当前第${pageBean.page}/${pageBean.pageCount}页</button>

            <div class="btn-group">
                <button type="button" class="btn btn-primary dropdown-toggle"
                        data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                    每页显示${pageBean.pageSize}条 <span class="caret"></span>
                </button>
                <ul class="dropdown-menu">
                    <li><a href="javascript:gotoPage(1,5)">每页显示5条</a></li>
                    <li><a href="javascript:gotoPage(1,10)">每页显示10条</a></li>
                    <li><a href="javascript:gotoPage(1,15)">每页显示15条</a></li>
                    <li><a href="javascript:gotoPage(1,20)">每页显示20条</a></li>
                </ul>
            </div>

            <button class="btn btn-primary disabled" type="button">共${pageBean.rowCount}条记录</button>

            <c:if test="${pageBean.page==pageBean.pageCount }">
                <button class="btn btn-primary disabled" type="button">下一页</button>
            </c:if>
            <c:if test="${pageBean.page<pageBean.pageCount }">
                <button onclick="gotoPage(${pageBean.page+1},${pageBean.pageSize})"  class="btn btn-primary" type="button">下一页</button>
            </c:if>
            <button onclick="gotoPage(${pageBean.pageCount },${pageBean.pageSize})" class="btn btn-primary" type="button">尾页</button>
        </div>
    </div>
</div>

<br><br><br>
</body>
<script type="text/javascript">
    function gotoPage(page,pageSize){
        $("#page").val(page);
        $("#pageSize").val(pageSize);
        $("#seachform").submit();
    }

    function updateBxInforState(o, oid) {
        var isActice = $(o).val();
        $.get("expense/updateBxInforState", {"oid": oid, 'isActice': isActice}, function (s) {
            if (s == true) {
                if (isActice == "1") {
                    $(o).text("禁用");
                    $(o).val("0");
                    $(o).removeClass("btn-success");
                    $(o).addClass("btn-warning");
                    $(o).parent().prev().text("可用");
                } else {
                    $(o).text("启用");
                    $(o).val("1");
                    $(o).removeClass("btn-warning");
                    $(o).addClass("btn-success");
                    $(o).parent().prev().text("不可用");
                }
            }
        }).complete(function (xhr) {
            if (xhr.status == "403") {//没有权限
                document.location.href = xhr.getResponseHeader("url");
            } else if (xhr.status != "200") {
                console.log("服务器错误!");
            }
        });
    }
</script>
</html>